<script setup lang="ts">
	import { provide, watchEffect } from 'vue';
	import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
	import { useBoundingRect } from '@/hooks/bounding-rect';
	import type { BoundingRect } from '@/hooks/bounding-rect';
	import { useAuthStore, useImStore } from "@/stores";
	import { getAccountInfo, getImChatUserList, getOpenId, getNimAccount } from "@/apis/auth";
	import { initNim } from "@/im";
	import { isEmpty } from "@/utils/util";
	import { wxLogin } from '@/utils/wx.api';
	provide<BoundingRect>('boundingRect', useBoundingRect());
	const authStore = useAuthStore();
	const imStore = useImStore();

	// watchEffect(async (onCleanup) => {
	// 	if (!authStore.isLogin) return;
	// 	let outmoded = false;
	// 	onCleanup(() => {
	// 		outmoded = true;
	// 	})
	// 	console.log('Promise.all',Promise.all);
	// 	Promise.all([getAccountInfo(), getImChatUserList()]).then((posts) => {
	// 		const [accountInfoResult, imChatUserResult] = posts as any;
	// 		if (outmoded) return;
	// 		if (accountInfoResult.code !== 200) return;
	// 		const { accid, nimToken } = accountInfoResult.data ?? {};
	// 		if (isEmpty(accid) || isEmpty(nimToken)) return;

	// 		imStore.setChatUserList(imChatUserResult?.rows ?? []);

	// 		initNim({
	// 			account: accid, token: nimToken
	// 		});
	// 	});
	// });



	onLaunch(async () => {
		console.log("App Launch");
		const wxLoginCode = await wxLogin();
		console.log('wxLoginCode', wxLoginCode);
		const openIdResult = await getOpenId(wxLoginCode);
		if (openIdResult.code !== 200) {
			return;
		}
		const openId = openIdResult.data as string;
		Promise.all([getNimAccount(openId), getImChatUserList()]).then((posts) => {
			const [nimResult, imChatUserResult] = posts as any;
			if (nimResult.code !== 200) return;
			const { accid, token } = nimResult.data ?? {};
			if (isEmpty(accid) || isEmpty(token)) return;

			imStore.setChatUserList(imChatUserResult?.rows ?? []);

			initNim({
				account: accid, token
			});
		});

	});
	onShow(() => {
		console.log("App Show");
	});
	onHide(() => {
		console.log("App Hide");
	});
</script>
<style lang="scss">
	@import "./uni_modules/vk-uview-ui/index.scss";

	page {
		height: 100vh;
		overflow: auto;
		background-color: $uni-bg-color;
		color: $uni-main-color;
	}

	.aspect-fill {
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}



	.empty-white-button {
		display: inline-flex;
		height: auto;
		padding: 0;
		margin: 0;
		background-color: white;
		border-radius: 0;
		line-height: normal;

		&::after {
			display: none;
		}
	}

	.scroll-section {
		&__inner {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	}

	.common-footer {
		display: inline-flex;
		flex-shrink: 0;
		width: 100%;
		height: 100%;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.viewport {
		position: relative;
		display: flex;
		flex: 1;
		height: 100%;
		flex-direction: column;
		box-sizing: border-box;

		&.deduct-tabbar {
			height: calc(100% - 96rpx - env(safe-area-inset-bottom));
		}

		&__up-area {
			display: flex;
			flex: 1;
			flex-direction: column;
			overflow-y: auto;
			padding-bottom: 30rpx;
			box-sizing: border-box;
		}

		&__footer-area {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding-top: 32rpx;
			padding-right: 32rpx;
			padding-left: 32rpx;
			box-sizing: border-box;
			background-color: white;

			button {
				margin-bottom: 32rpx;
			}
		}

	}

	.p20 {
		padding: 20rpx;
	}

	.p30 {
		padding: 30rpx;
	}

	.default-bgcolor {
		background-color: #F6F6F6;
	}
	
	.white-bgcolor {
		background-color: #fff;
	}
	
	.safe-area-inset-bottom {
		padding-bottom: env(safe-area-inset-bottom);
	}


	.flex {
		display: flex;
		flex: 1;
	}

	.iflex,
	.inline-flex {
		display: inline-flex;
		flex-shrink: 0;
	}

	.flex,
	.iflex,
	.inline-flex {
		position: relative;
		box-sizing: border-box;

		&.fill {
			width: 100%;
		}

		&.column {
			flex-direction: column;
		}

		&.aic {
			align-items: center;
		}

		&.jcsb {
			justify-content: space-between;
		}

		&.jcc {
			justify-content: center;
		}

		&.jcfe {
			justify-content: flex-end;
		}
	}

	.ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ellipsis-line-clamp {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.ellipsis-line-clamp3 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}


	.follow {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 124rpx;
		height: 48rpx;
		border-radius: 46rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #929292;
		background: #F3F3F3;

		&--highlight {
			background: #FF710A;
			color: #FFFFFF;
		}
	}

	.lawyer-case {
		display: inline-flex;
		justify-content: center;
		flex-shrink: 0;
		width: 100%;
		margin-top: 20rpx;
		box-sizing: border-box;

		&__box {
			display: inline-flex;
			justify-content: space-between;
			align-items: center;
			flex-shrink: 0;
			width: 690rpx;
			padding: 24rpx 20rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 12rpx;
		}

		&__image {
			display: inline-flex;
			flex-shrink: 0;
			width: 160rpx;
			height: 126rpx;
			border-radius: 18rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		&__intro {
			display: inline-flex;
			flex-shrink: 0;
			width: 462rpx;
			height: 112rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 56rpx;
		}
	}

	.lawyer-honor {
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		flex-shrink: 0;
		width: 330rpx;
		height: 344rpx;
		padding: 18rpx;
		margin-top: 30rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 18rpx;

		&:nth-child(even) {
			margin-left: 26rpx;
		}

		&__image {
			display: inline-flex;
			width: 100%;
			height: 240rpx;
			border-radius: 14rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		&__intro {
			text-align: center;
			height: 48rpx;
			line-height: 48rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
		}
	}


	.user-comment {
		padding: 32rpx 32rpx;
		background-color: white;

		&+.user-comment {
			&:after {
				content: '';
				position: absolute;
				left: 32rpx;
				right: 32rpx;
				top: 0;
				border-top: 1px solid #E6E5E5;
			}
		}



		&__info {

			&__rate {
				position: absolute;
				right: 0;
				top: 0;
			}

			&__portrait {
				width: 60rpx;
				height: 60rpx;
				border-radius: 60rpx;
			}

			&__other {
				padding-left: 12rpx;

				view {
					color: #000000;
					font-size: 30rpx;
					font-weight: 500;
					line-height: 48rpx;
				}

				text {
					color: #929292;
					font-size: 22rpx;
					font-weight: 400;
					line-height: 48rpx;
				}
			}
		}

		&__content {
			padding-top: 12rpx;
			height: 46rpx;
			color: #929292;
			font-size: 26rpx;
			font-weight: 400;
			line-height: 48rpx;
		}

		&__tag {
			width: 168rpx;
			height: 56rpx;
			margin: 20rpx 30rpx 0 0;
			padding: 12rpx;
			border-radius: 66rpx;
			border: 1px solid #F2F2F2;
			background: #FFF;
			color: #929292;
			font-size: 24rpx;
			font-weight: 400;
			overflow: hidden;
		}
	}

	.lawyer-item {
		position: relative;
		position: relative;
		display: inline-flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 40rpx 30rpx;
		box-sizing: border-box;

		&+.lawyer-item {
			&::after {
				content: '';
				position: absolute;
				left: 30rpx;
				right: 30rpx;
				top: 0;
				display: inline-flex;
				height: 1px;
				background-color: #E6E5E5;
			}
		}

		&__icon {
			position: relative;
			display: inline-flex;
			flex-shrink: 0;
			width: 148rpx;
			height: 156rpx;
			border-radius: 10rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 10rpx;
			}

			.online {
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
				display: inline-flex;
				width: 12rpx;
				height: 12rpx;
				background: #5DF28F;
				border-radius: 50%;
			}
		}

		&__info {
			display: inline-flex;
			flex-direction: column;
			justify-content: space-between;
			width: 512rpx;
			height: 156rpx;
			box-sizing: border-box;

			&__main {
				display: inline-flex;
				width: 100%;
				height: 44rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
			}

			&__desc {
				display: inline-flex;
				width: 100%;
				padding: 12rpx 0;
				font-weight: 400;
				font-size: 24rpx;
				color: #929292;
				line-height: 28rpx;

				text {
					padding: 0 10rpx;
				}
			}

			&__advantage {
				display: inline-flex;
				align-items: center;
				width: 100%;
				height: 36rpx;
				line-height: 36rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #7C7C7C;

				.advantage-tag {
					display: inline-flex;
					flex-shrink: 0;
					align-items: center;
					justify-content: center;
					width: 64rpx;
					height: 32rpx;
					box-sizing: border-box;
					background: #FBE8DA;
					border-radius: 4rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #FF710A;
				}

				.advantage-list {
					display: inline-flex;
					width: 445rpx;
					padding-left: 10rpx;
					box-sizing: border-box;
				}
			}
		}

		.follow {
			position: absolute;
			right: 30rpx;
			top: 40rpx;
		}
	}

	.icon-more {
		display: inline-flex;
		flex-shrink: 0;
		width: 10rpx;
		height: 18rpx;
		background: url('');
		background-size: cover;
	}

	.company-icon {
		width: 32rpx;
		height: 29rpx;
	}

	.location-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.company-icon,
	.location-icon {
		margin-right: 17rpx;
	}

	.impress-tag {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 188rpx;
		height: 60rpx;
		margin-right: 28rpx;
		margin-top: 30rpx;
		background: #F3F3F3;
		border-radius: 8rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #323232;

		&.selected {
			background: $uni-primary;
			color: white;
		}

		&:nth-child(3n) {
			margin-right: 0;
		}
	}

	.recommend-lawyer {
		width: 333rpx;
		height: 400rpx;
		border-radius: 20rpx;
		overflow: hidden;
		border: 2rpx solid white;

		&__image {
			width: 333rpx;
			height: 227.3rpx;
			flex-shrink: 0;
			background: linear-gradient(89deg, #B1AFAE 1.25%, #615E5E 93.81%);
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		&__leading {
			position: absolute;
			top: 94rpx;
			left: 26rpx;
			width: 105rpx;
			height: 74rpx;

			image {
				width: 100%;
				height: 100%;
			}

			view {
				position: absolute;
				top: 50rpx;
				left: 32rpx;
				width: 64rpx;
				height: 22rpx;
				font-weight: 500;
				font-size: 16rpx;
				color: #957F6B;
			}
		}

		&__info {
			position: absolute;
			height: 222rpx;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 20rpx;
			border: 2rpx solid #FFF;
			background: #ffffffcc;
			backdrop-filter: blur(13.7rpx);

			&__name {
				margin-top: 28rpx;
				width: 300rpx;
				height: 50rpx;
				overflow: hidden;
				font-weight: 500;
				font-size: 36rpx;
				color: #000000;
				line-height: 42rpx;
			}

			&__other {
				margin-top: 12rpx;
				height: 30rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #929292;
				line-height: 26rpx;

				text {
					padding: 0 10rpx;
				}
			}

			&__advantage {
				padding: 0 30rpx;
				margin-top: 34rpx;
				max-height: 68rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #5D6068;
				line-height: 28rpx;

				text {
					&+text {
						padding-left: 10rpx;
					}
				}
			}
		}
	}
</style>